<template>
  <div>
    <div>
      <app-headers></app-headers>
    </div>

    <p class="goods">今日特卖</p>
    <div class="list">
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <span>{{ item.time }}</span>
          <a>
            <img :src="item.img" alt v-lazy="item.img" />
            <p v-html="item.price"></p>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import appHeaders from "../components/headers";
import goodsApi from "../api/goodsApi";
import { Lazyload } from 'vant';
export default {
  data() {
    return {
      list: []
    };
  },

  components: {
    appHeaders
  },
  methods: {
    getData() {
      goodsApi
        .getGoods({ type: "Sale" })
        .then(res => {
          //console.log(res.data);
          this.list = res.data.data
          
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
   created() {
    this.getData();//发请求获取数据渲染
  }
};
</script>

<style scoped lang='scss'>
@import "@/assets/sass/common.scss";
@import "@/assets/sass/vw.scss";

.goods {
  color: red;
  position: relative;
  font-size: vw(32);
  padding-left: vw(10);
  line-height: vw(70);
  // height: vw(44);
  width: vw(160);
}
.goods::after {
  display: block;
  width: vw(130);
  height: vw(2.5);
  background: red;
  position: absolute;
  content: "";
  bottom: vw(6);
}
.list {
  span {
    position: absolute;
    background: rgba($color: #000000, $alpha: 0.5);
    color: white;
    right: 0;
    font-size: vw(24);
    width: vw(156);
    height: vw(42);
    line-height: vw(42);
    text-align: center;
  }
  a img {
    width: vw(750);
  }
  a p {
    font-size: vw(30);
    height: vw(82);
    color: rgb(148, 4, 177);
    width: vw(720);
    line-height: vw(82);
    margin-left: vw(15);
    position: relative;
  }
  p::after {
    display: block;
    width: vw(720);
    height: 0.5px;
    background: #e5e5e5;
    position: absolute;
    content: "";
    bottom: vw(15);
  }
}
</style>